import React from "react";
import {connect} from "react-redux";
import {fetchPosts, reset} from "../../actions";


import Events from "../../utils/Events";
import isEqual from "lodash/isEqual";
import Goods from "../../components/Goods";

class searchGoods extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searching: true,
            searchText: "",
            pageindex:1,
            listItems:[],
            isLoading: true,
        }
    }

    componentWillMount() {
        document.title = "搜索好物";
    }

    componentDidMount() {
        this._scrollListener = Events.on(window, 'scroll', this.checkButtom.bind(this))
    }

    componentWillUnmount() {
        this._scrollListener && this._scrollListener.off();
    }

    addList(lists){
        this.setState({isLoading:lists.length == 10 ? true:false});
        if(this.state.pageindex == 1){
            this.setState({listItems:lists});
        }else{
            this.setState({listItems:this.state.listItems.concat(lists)});
        }
    }

    checkButtom(){
        const header= {"X-Client-ID":"123456"}
        let scrollTop = document.body.scrollTop,
            innerHeight = window.innerHeight,
            scrollHeight = document.body.scrollHeight,
            pageindex = this.state.pageindex;

        if(scrollTop + innerHeight >= scrollHeight && this.state.isLoading ){
            pageindex++;
            this.setState({pageindex:pageindex});
            this.props.dispatch(fetchPosts("searchGoods", header,
                {
                    keyword: this.state.changeText,
                    pageindex:pageindex,
                    pagesize:10
                })
            )
        }
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.GoodsList.errorCode == 0 && !isEqual(nextProps.GoodsList, this.props.GoodsList)){
            this.addList(nextProps.GoodsList.data.categoryGoodsVos);
        }

        if((nextProps.GoodsList.errorCode == 0) && (this.state.pageindex == 1) && (nextProps.GoodsList.data.categoryGoodsVos <= 0)) {
            alert("没有搜索到您查询的商品");
            this.setState({searching: true});
        } else {
            this.setState({searching: false});
        }

    }

    search() {
        if(this.state.changeText && this.state.changeText != "") {
            this.setState({pageindex: 1});
            const header= {"X-Client-ID":"123456"};
            const params = {"keyword": this.state.changeText, "pageindex":1, "pagesize":10}
            this.props.dispatch(reset("searchGoods", header));
            this.props.dispatch(fetchPosts("searchGoods",header,params));
        } else {
            alert("请输入搜索关键字!");
        }
    }

    _change(event) {
        this.setState({
            changeText: event.target.value
        });
    }

    _back() {
        this.context.router.goBack();
    }

    renderTitle() {
        return(
            <div className="search-input">
                <div>
                    <img src="http://oeb6w1s1c.bkt.clouddn.com/170510165015932477026341.png"/>
                    <input type="text" placeholder="搜索好物" onChange={this._change.bind(this)}/>
                </div>
                <p onClick={this.search.bind(this)}>搜索</p>
            </div>
        );
    }

    render() {
        if(this.state.searching) {
            return (
                <div>
                    {this.renderTitle()}
                    <div className="loading" style={{marginTop: '50px'}}><span>没有商品记录</span></div>
                </div>
            )
        } else {
            return (
                <div>
                    {this.renderTitle()}
                    <div className="mall-goods-list">
                        <ul>
                            {this.state.listItems.map((item, index) => {
                                    return (
                                        <Goods key={index} item={item}/>
                                    )
                                }
                            )}
                        </ul>
                    </div>
                </div>
            )
        }
    }
}


searchGoods.contextTypes = {
    router:React.PropTypes.object
}

function mapStateToProps(state){
    const { postsByApi } = state
    const {
        items: GoodsList
    } = postsByApi["searchGoods"] || {
        items: {}
    }
    return {
        GoodsList
    }
}


export default connect(mapStateToProps)(searchGoods);